
<template>
  <div>
    <!-- 上半部分 -->
    <header class="header">大屏项目</header>
    <!-- 体部 -->
    <div class="container">
      <div class="container-top">
        <div class="container-top-left">
          <div class="charts">
            <el-card shadow="always" class="box-card1" body-style="{display:'flex'}" >
              <div>设备总数</div>
              <div style="color:#909399">1</div>
              <div style="color:#909399">1</div>
              <div style="color:#909399">1</div>
              <div class="num">{{empData[0].value}}个</div>
              <!-- <span style="text-align:center">5</span> -->
            </el-card>
          </div>
          <div class="charts">
            <el-card class="box-card2">
              <div>在线设备数</div>
              <div style="color:#67C23A">1</div>
              <div style="color:#67C23A">1</div>
              <div style="color:#67C23A">1</div>
              <div class="num">{{empData[1].value}}个</div>     
            </el-card>
          </div>
        </div>
        <div class="container-top-center">
          <template container>
                <Map>中间</Map>
          </template>
        </div>
        <div class="container-top-right">
          <div class="charts">
            <el-card class="box-card4">
              <div>离线设备数</div>
              <div style="color:#E6A23C">1</div>
              <div style="color:#E6A23C">1</div>
              <div style="color:#E6A23C">1</div>
              <div class="num">{{empData[2].value}}个</div> 
            </el-card></div>
          <div class="charts">   
            <el-card class="box-card5">
               <div>工程总数</div>
              <div style="color:#606266">1</div>
              <div style="color:#606266">1</div>
              <div style="color:#606266">1</div>
              <div class="num">{{empData[3].value}}个</div> 
            </el-card>
          </div>
        </div>
      </div>
      <div class="container-bottom">
        <div class="charts">
          <el-card class="box-card6">
             <div>工单总数</div>
            <div style="color:#F56C6C">1</div>
              <div style="color:#F56C6C">1</div>
              <div style="color:#F56C6C">1</div>
              <div class="num">{{empData[4].value}}个</div> 
            </el-card>
        </div>
        <div class="charts">
           <template container>
                <C221>左一</C221>
          </template>
        </div>
        <div class="charts">
           <template container>
                <C222>左二</C222>
          </template>
        </div>
        <div class="charts">
          <el-card class="box-card9">
            <div>报修总数</div>
            <div style="color:#409EFF">1</div>
              <div style="color:#409EFF">1</div>
              <div style="color:#409EFF">1</div>
              <div class="num">{{empData[2].value}}个</div> 
            </el-card>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
//引入C221.vue页面
import C221 from '@/views/dashboard/components/C221.vue'
import C222 from '@/views/dashboard/components/C222.vue'
import C223 from '@/views/dashboard/components/C223.vue'
import Map from '@/views/dashboard/components/Map.vue'
//引入get方法
import {get} from '@/utils/request';
export default {
  //将这些vue页面注册成为组件
  components:{
    C221,
    C222,
    C223,
    Map
  },
  data() {
    return {
     empData:[]
    };
  },
  computed: {},
  methods: {
    async getEmpData(){
      let res = await get('/count/countAll');
       console.log(res,'获取响应111');
       //将后台获取的数据赋值给变量
       this.empData = res.data;
    }
    
  },
  created() {},
  mounted() {
    this.getEmpData();
  },
};
</script>
<style  scoped>
.charts {
  /* 1em=16px   8px */
  margin: 0 1em 1em 1em;
  /* background-image: url(../../assets/layout/chart_box_bg.png); */
  /* background-size: 100% 100%; */
  padding: 0.5em;
}

.header {
  height: 60px;
  /* background-image: url(../../assets/layout/header.png); */
  /* 背景图片的大小 */
  /* background-size: 100% 200px; */
  color: rgb(27, 22, 156);
  /* 文字水平居中 */
  text-align: center;
  /* 文字大小 */
  font-size: 28px;
}
.container {
  height: calc(100vh - 60px);
  display: flex;
  flex-direction: column;
}
.container-top {
  flex: 2;
  display: flex;
  flex-direction: row;
}
.container-top-left,
.container-top-right {
  flex: 1;
  display: flex;
  flex-direction: column;
}
/* 选中直接子代 */
.container-top-left > *,
.container-top-right > * {
  flex: 1;
}

.container-top-center {
  flex: 2;
  /* background-image: url(../../assets/layout/chart_center_box_bg.png); */
  background-size: 100% 100%;
  margin-bottom: 0.5em;
  padding: 0.5em;
}

.container-bottom {
  flex: 1;
  display: flex;
  flex-direction: row;
}

.container-bottom > * {
  flex: 1;
}
.box-card1 {
  width: 100%;
  height: 100%;
  background-color:#909399;
}
.box-card2 {
  width: 100%;
  height: 100%;
  background-color:#67C23A;
}
.box-card4 {
  width: 100%;
  height: 100%;
  background-color:#E6A23C;
}
.box-card6 {
  width: 100%;
  height: 100%;
  background-color:#F56C6C;
}
.box-card9 {
  width: 100%;
  height: 100%;
  background-color:#409EFF;
}
.box-card5 {
  width: 100%;
  height: 100%;
  background-color:#606266;
}
.num{
  text-align: center;
}
</style>